<!--编辑器模块-->
<div>
<!--工具栏-->
<div class="md-nav" ms-hover="" >
    <ul class="md-nav-l">
        <li >
            <a  title="导入MD文件" class="tool-item spirit" ms-click="toggleModal(1)">
                <i class=" icon-folder-open"></i>
            </a>
            <div class=" md-modal"  ms-if="showModal==1" ms-on-mouseleave="toggleModal(0)">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" ms-click="toggleModal(0)"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" >打开本地文件</h4>
                    </div>
                    <div class="modal-body">
                        <br/>
                        <input type="file" class="form-control" id="file"/>
                        <br/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" ms-click="toggleModal(0)">取消</button>
                        <button type="button" class="btn btn-primary" ms-click="open">确认</button>
                    </div>
                </div>
            </div>
        </li>
        <li>
        <a ms-attr-href="file" title="保存文件" class="tool-item spirit" id="save" ms-on-mouseenter="save">
        <i class="icon-save"></i>
        </a>
        </li>
        <li>
            <a>|</a>
        </li>
        <li class="dropdown">

            <ul class="md-dropdown-menu" ms-if="dh" ms-mouseleave="dropdown('dh')">
                <li><a title=""  class="tool-item" ms-click="h1"  ms-click-a="dropdown('dh')">标题1</a></li>
                <li><a title=""  class="tool-item" ms-click="h2" ms-click-a="dropdown('dh')">标题2</a></li>
                <li><a title="" class="tool-item" ms-click="h3" ms-click-a="dropdown('dh')">标题3</a></li>
                <li><a title="" class="tool-item" ms-click="h4" ms-click-a="dropdown('dh')">标题4</a></li>
                <li><a title="" class="tool-item" ms-click="h5" ms-click-a="dropdown('dh')">标题5</a></li>
            </ul>
            <a  title="标题"  class=" tool-item spirit" ms-click="dropdown('dh')">
                <i class="icon-th-list"></i>
                <span class="caret"></span>
            </a>
        </li>
        <li>
            <a  title="粗体" class="tool-item spirit" ms-click="bold">
                <i class="icon-bold"></i>
            </a>
        </li>
        <li>
            <a title="斜体" class="tool-item spirit" ms-click="italic">
                <i class="icon-italic"></i>
            </a>
        </li>
        <li>
            <a>|</a>
        </li>
        <li>
            <a title="连接" class="tool-item spirit"  ms-click="toggleModal(2)">
                <i class="icon-link"></i>
            </a>
            <!--插入链接模态框-->

            <div class=" md-modal"  ms-if="showModal==2" ms-on-mouseleave="toggleModal(0)">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" ms-click="toggleModal(0)"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" >插入连接</h4>
                    </div>
                    <div class="modal-body">
                        请输入连接地址：<br/>
                        <input type="text" class="form-control" ms-duplex="link"/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" ms-click="toggleModal(0)">取消</button>
                        <button type="button" class="btn btn-primary" ms-click="links">确认</button>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <a title="引用" class="tool-item spirit" ms-click="quote">
                <i class="icon-quote-left"></i>
            </a>
        </li>
        <li>
            <a title="代码" class="tool-item spirit" ms-click="code">
                <b>&lt;/&gt;</b>
            </a>
        </li>
        <li>
            <a title="图片" class="tool-item spirit" ms-click="toggleModal(3)" ms-click="getUploader">
                <i class="icon-picture"></i>
            </a>
            <!--插入图片模态框-->

            <div class=" md-modal"  ms-if="showModal==3" >
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" ms-click="toggleModal(0)" ><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" >插入图片</h4>
                    </div>
                    <div class="modal-body">
                        图片URL地址：<br/>
                        <input type="text" class="form-control" ms-duplex="imgUrl"/>
                        <h4>
                            或者上传一张图片
                        </h4>

                        <tsy:uploader config="$uploader"></tsy:uploader>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" ms-click="toggleModal(0)">取消</button>
                        <button type="button" class="btn btn-primary" ms-click="img">确认</button>
                    </div>
                </div>
            </div>
        </li>
        <li class="dropdown">

            <ul class="md-dropdown-menu" ms-if="dl" ms-mouseleave="dropdown('dl')">
                <li><a title="" class="tool-item" ms-click="ol" ms-click-a="dropdown('dl')">有序列表</a></li>
                <li><a title="" class="tool-item" ms-click="ul" ms-click-a="dropdown('dl')">无序列表</a></li>

            </ul>
            <a title="列表"  class=" tool-item spirit" ms-click-a="dropdown('dl')">
                <i class="icon-list-ol"></i>
                <span class="caret"></span>
            </a>
        </li>
        <li>
            <a title="表格" class="tool-item spirit" ms-click="table">
                <i class="icon-table"></i>
            </a>
        </li>
        <li>
            <a>|</a>
        </li>
        <li>
            <a title="分割线" class="tool-item spirit" ms-click="divider">
                <i class="icon-minus"></i>
            </a>
        </li>
        <li>
            <a title="分段" class="tool-item spirit" ms-click="paragraph">
                <i class="icon-align-left"></i>
            </a>
        </li>
    </ul>
    <ul class="md-nav-r">
        <li ms-class="active:now==0">
            <a   title="专注书写模式" class="to-write tool-item spirit" ms-click="toWrite" ms-class="now:now==0">
                <i class="icon-edit"></i>

            </a>
        </li>
        <li ms-class="active:now==1">
            <a   title="实时预览模式" class="to-both  tool-item spirit" ms-click="toBoth" ms-class="now:now==1">
                <i class="icon-columns"></i>
            </a>
        </li>
        <li ms-class="active:now==2">
            <a   title="纯净阅读模式" class="to-read tool-item spirit" ms-click="toRead" ms-class="now:now==2">
                <i class="icon-desktop"></i>
            </a>
        </li>
    </ul>
</div>



<!--输入区-->
<div class="row">
    <!--左侧输入区-->
    <div id="doc-main-layout" class="doc-layout col-sm-6">


        <!--文章表单-->

        <textarea class=" alive-hover live-sroll card" id="doc-main"
                  placeholder="开始书写..." autofocus ms-duplex="md" ms-on-keyup="trs" ms-on-keypress="hotKey"></textarea>

    </div>
    <!--右侧预览区-->
    <div id="doc-show-layout" class="doc-layout col-sm-6">

        <div id="doc-show" class="alive-hover markdown-preview live-sroll card">
            {{html|html}}

        </div>

    </div>
    <div class="col-sm-12">

        <div id="read-only" hidden="hidden" class="markdown-preview card">
            {{html|html}}
        </div>
    </div>
</div>
</div>


